/**
 * Created by tanbingqin on 2019/12/3.
 */
import {messages} from "share/common";
import React from 'react';
import { connect } from 'react-redux';
import { Form, Select, Row, Col, message, Icon, InputNumber, Button } from 'antd';
const FormItem = Form.Item;
import policyService from "containers/travel-standard/travel-standard.service"
import errorMessage from 'share/errorMessage'
const Option = Select.Option;

class HotelConfig extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      hotelTypeData: {},
      participantRuleCode: '', //内部参与人多条标准时
      externalParticipantRuleCode: '', //外部参与人标准
      multiConsolidatedRuleCode: '', //多个参与人统一订票时
      multiConsolidatedRuleAmount: 100, //多个参与人统一订票时的百分比
      multiIndividualRuleCode: '', //多个参与人各自订票时
    }
  }

  componentWillMount() {
    const { hotelTypeData, participantRuleCode, externalParticipantRuleCode, multiConsolidatedRuleCode,
      multiConsolidatedRuleAmount, multiIndividualRuleCode
    } = this.props;
    this.setState({
      hotelTypeData,
      participantRuleCode,
      externalParticipantRuleCode,
      multiConsolidatedRuleCode,
      multiConsolidatedRuleAmount: multiConsolidatedRuleAmount || 100,
      multiIndividualRuleCode
    });
  };

  //选择酒店的差旅标准
  handleSelectType = (value, key) => {
    this.setState({[key]: value});
  };

  //修改百分比
  handleChangeAmount = (num) => {
    this.setState({multiConsolidatedRuleAmount: num});
  };

  handleSave = () => {
    const { hotelConfigId } = this.props;
    const { participantRuleCode, externalParticipantRuleCode, multiConsolidatedRuleCode, multiConsolidatedRuleAmount,
      multiIndividualRuleCode } = this.state;
    if (participantRuleCode && externalParticipantRuleCode && multiConsolidatedRuleCode && multiConsolidatedRuleAmount
      && multiIndividualRuleCode) {
      let saveParams = {
        id: hotelConfigId || undefined,
        participantRule: participantRuleCode,
        externalParticipantRule: externalParticipantRuleCode,
        multiConsolidatedRule: multiConsolidatedRuleCode,
        multiRate: multiConsolidatedRuleAmount,
        multiIndividualRule: multiIndividualRuleCode
      };
      this.setState({loading: true});
      policyService.saveHotelConfig(saveParams).then((resp) => {
        message.success(messages('request-1.key736')/*保存成功*/);
        this.setState({loading: false});
        this.props.close(true);
      }).catch(e => {
        this.setState({loading: false});
        errorMessage(e.response);
      });
    } else {
      message.error(messages('request-1.key737')/*有未填项*/);
    }
  };

  onCancel = () => {
    this.props.close();
  };

  render() {
    const { loading, hotelTypeData, participantRuleCode, externalParticipantRuleCode, multiConsolidatedRuleCode,
      multiConsolidatedRuleAmount, multiIndividualRuleCode
    } = this.state;

    const layout = {
      labelCol: {span: 6},
      wrapperCol: {span: 18}
    };

    return (
      <Form className="new-form">
        <FormItem {...layout} label={messages('request-1.key738')/*内部参与人多条标准时：*/}>
          <Select
            allowClear
            placeholder={messages('common.select')/*请选择*/}
            filterOption={false}
            value={participantRuleCode ? participantRuleCode : undefined}
            onChange={(value) => this.handleSelectType(value, 'participantRuleCode')}
            getPopupContainer={triggerNode => triggerNode.parentNode}
          >
            {hotelTypeData.participantRuleTypes && hotelTypeData.participantRuleTypes.map(
              type => <Option value={type.code} key={type.code}>{type.name}</Option>
            )}
          </Select>
        </FormItem>

        <FormItem {...layout} label={messages('request-1.key739')/*外部参与人标准：*/}>
          <Select
            style={{width: '100%'}}
            allowClear
            placeholder={messages('common.select')/*请选择*/}
            filterOption={false}
            value={externalParticipantRuleCode ? externalParticipantRuleCode : undefined}
            onChange={(value) => this.handleSelectType(value, 'externalParticipantRuleCode')}
            getPopupContainer={triggerNode => triggerNode.parentNode}
          >
            {hotelTypeData.externalParticipantRuleTypes && hotelTypeData.externalParticipantRuleTypes.map(
              type => <Option value={type.code} key={type.code}>{type.name}</Option>
            )}
          </Select>
        </FormItem>

        <FormItem {...layout} label={messages('request-1.key740')/*多个参与人统一订票时：*/}>
          <Select
            allowClear
            placeholder={messages('common.select')/*请选择*/}
            filterOption={false}
            value={multiConsolidatedRuleCode ? multiConsolidatedRuleCode : undefined}
            onChange={(value) => this.handleSelectType(value, 'multiConsolidatedRuleCode')}
            getPopupContainer={triggerNode => triggerNode.parentNode}
          >
            {hotelTypeData.multiConsolidatedRuleTypes && hotelTypeData.multiConsolidatedRuleTypes.map(
              type => <Option value={type.code} key={type.code}>{type.name}</Option>
            )}
          </Select>
        </FormItem>

        <FormItem {...layout} label={messages('request-1.key741')/*统一订票合住加权系数：*/}>
          <div className="sm-width">
            <Col span={22} style={{lineHeight: '32px'}}>
              <InputNumber
                style={{width: '100%'}}
                placeholder={messages('request-1.key579')/*请输入temp2*/}
                onChange={this.handleChangeAmount}
                value={multiConsolidatedRuleAmount}
                precision={2}
                max={9999}
                min={0.01}
              />
            </Col>
            <Col span={2}>&nbsp;%</Col>
          </div>
        </FormItem>

        <FormItem {...layout} label={messages('request-1.key742')/*多个参与人各自订票时：*/}>
          <Select
            style={{width: '100%'}}
            allowClear
            placeholder={messages('common.select')/*请选择*/}
            filterOption={false}
            disabled={true}
            value={multiIndividualRuleCode ? multiIndividualRuleCode : undefined}
            onChange={(value) => this.handleSelectType(value, 'multiIndividualRuleCode')}
            getPopupContainer={triggerNode => triggerNode.parentNode}
          >
            {hotelTypeData.multiIndividualRuleTypes && hotelTypeData.multiIndividualRuleTypes.map(
              type => <Option value={type.code} key={type.code}>{type.name}</Option>
            )}
          </Select>
        </FormItem>

        <div className="slide-footer">
          <Button type="primary" htmlType="submit" loading={loading} onClick={this.handleSave}>{messages('common.ok')/*确定*/}</Button>
          <Button onClick={this.onCancel}>{messages('common.cancel')/*取消*/}</Button>
        </div>
      </Form>
    )
  }
}

function mapStateToProps(state) {
  return {

  }
}

HotelConfig.propTypes = {
  onChange: React.PropTypes.func  //更改属性时的回调
};

HotelConfig.defaultProps = {

};

const WrappedValueRule = Form.create()(HotelConfig);

export default connect(mapStateToProps)(WrappedValueRule);


